<template>
    <table>
        <thead>
            <th>序号</th>
            <th>书籍名称</th>
            <th>出版日期</th>
            <th>价格</th>
            <th>购买数量</th>
            <th>操作</th>
        </thead>
        <tbody>
            <tr v-for="(book,index) in books" :key="book.id">
                <td>
                    {{ index + 1 }}
                </td>
                <td>
                    {{ book.name }}
                </td>
                <td>
                    {{ book.date }}
                </td>
                <td>
                    {{ book.price }}
                </td>
                <td>
                    <button @click="minus(index)" :disabled="book.count<=1">-</button>
                    <span class="counter">{{ book.count }}</span>
                    <button @click="add(index)">+</button>
                </td>
                <td>
                    <button @click="delete1(index)">删除</button>
                </td>
            </tr>
        </tbody>
    </table>
    <h2>总价格:{{ total }}</h2>
</template>

<script setup>
    import { ref,reactive,computed } from 'vue'

    let books = reactive([
        {
          id: 1,
          name: '《算法导论》',
          date: '2006-9',
          price: 85.00,
          count: 1
        },
        {
          id: 2,
          name: '《UNIX编程艺术》',
          date: '2006-2',
          price: 59.00,
          count: 1
        },
        {
          id: 3,
          name: '《编程珠玑》',
          date: '2008-10',
          price: 39.00,
          count: 1
        },
        {
          id: 4,
          name: '《代码大全》',
          date: '2006-3',
          price: 128.00,
          count: 1
        },
      ])

    const minus = (i) =>{
        books[i].count--
      
    }

    const add = (i) => {
        books[i].count++
    }

    const total = computed(()=>{
        let sum=0
        for(let book of books){
            sum += book.price * book.count
        }
        return sum
    })

    const delete1 = (i) => {
        books.splice(i,1)
    }

</script>

<style lang="css" scoped>
    table{
        margin: 0 auto;
        border: 1px solid #aaa;
        border-collapse: collapse;
    }
    th,td{
        padding: 8px 16px;
        border: 1px solid #aaa;
    }
    .counter{
        margin: 0 5px; 
    }
</style>